
Vue.component2('a_1_0_4_6_1_menu2', {  
  template: `
      <div class="a_1_0_4_6_1_menu_bar" :key="refresh"  :style="'width:'+data.width">
          <div class="a_1_0_4_6_1_activity_item" v-for="(menu_id, index) in data.fast_menu" :key="index" @click="selectActivity(menu_id)" :class="{ a_1_0_4_6_1_active: menu_id == selectedActivity }"@mouseover="showSubMenu(menu_id)" @mouseleave="hideSubMenu(menu_id)">
              <span :class="data.menus[menu_id].menu_class"></span>
              <div class="a_1_0_4_6_1_sub_menu" v-if="menu_id==show_menu">
                  <div class="a_1_0_4_6_1_menu_item">
                      {{data.menus[menu_id].menu_name}}
                  </div>
              </div>
          </div>
      </div>
`,  
data() {
    return {
      
      show_menu:"-1",
      selectedActivity:'0',
      refresh:"1",/*用来刷新组件*/
      data:{
          width:"100%",
          menu_str:'',
          menus: {

      },
      fast_menu:[],//存放menus ids的数组 ids被转为整数 按照sort顺序排列
      show_flag:{}
      }
       
    };
},
watch:{
'data.menu_str':function(e)
{
  _this.menus=JSON.parse(e);
  _this.refresh_func();//刷新组件
}},
methods: {
  showSubMenu(menu_id) {
      if (this.show_menu!=menu_id){
          this.show_menu=menu_id;
          // console.log(this.show_menu)
          this.refresh=this.refresh=="2"?"1":"2";
      }
  },
  hideSubMenu(menu_id) {
      this.show_menu=null;
      this.refresh=this.refresh=="2"?"1":"2";
  },
  selectActivity(id) {
      this.selectedActivity = id;
      try{this.data.menus[this.selectedActivity].func(this.selectedActivity);}
      catch{console.log("点击菜单后出错！")
}
  },

},
mounted:function(){
  //调用此函数刷新整个组件
  _this.refresh_func=function(){
      //创建菜单目录 快速查找数组
      _this.data.fast_menu=(Object.keys(_this.data.menus).map(Number)).sort();
      _this.refresh=_this.refresh=="2"?"1":"2";
  }

  
    //设置选项
    _this.data.set_menu=function(obj){
      /*
      var_name:全局变量 【window[var_name]】
      menu_id:选项id
      menu_name:选项名称
      menu_class:选项类
      menu_keys:选项快捷方式
      */
     let menu_id=obj.menu_id;
     let var_name=obj.var_name;
     let menu_name=obj.menu_name;
     let menu_class=obj.menu_class;
     let menu_keys=obj.menu_keys;
     let func=obj.func;
     //如果已经拥有这个目录 那么仅修改名称
     if (_this.data.menus.hasOwnProperty(menu_id)){
      _this.data.menus[menu_id]['menu_name']=menu_name;
      _this.data.menus[menu_id]['menu_class']=menu_class;
      _this.data.menus[menu_id]['menu_keys']=menu_keys;
      _this.data.menus[menu_id]['func']=func;
     }else{
      //如果没有拥有则新建一个
      _this.data.menus[menu_id]={
          "menu_name":menu_name,
          "menu_keys":menu_keys,
          "var_name":var_name,
          "menu_class":menu_class,
          "func":func,
      }
     }
     _this.refresh_func();//刷新组件
    },
    _this.data.选择=_this.selectActivity;
    //绑定快捷方式对象
    _this.data.bind_fast_obj=function(fast_obj){
      /*快捷方式通过全局 快捷方式对象进行调用*/
    }
}
} 
);

Vue.component2('a_1_0_4_6_1_menu', {  
  template: `
     
      <div class="a_1_0_4_6_1_sub_menu" :style="lefttop" :key='refresh' v-show='show_flag'>
          <div class="a_1_0_4_6_1_sub_menu_item" ref="text"v-for="(key,indexr) in data.keys" @click="click($event,key)">
              {{data.menu_dct[key].text}}
          </div>
      </div>
`,
data(){
  return{
      show_flag:true,
      refresh:'1',
      lefttop:'color:red',
      data:{
          menu_dct:{
          },
          keys:{},
          x:'33',
          y:'33',
      }
  }
},
watch:{
  
  "data.x":function(e){
      this.lefttop=`left:${this.data.x};top:${this.data.y};`
  },
  "data.y":function(e){
      this.lefttop=`left:${this.data.x};top:${this.data.y};`
  },
},
methods:{
  
  click:function(event,key){
      this.data.menu_dct[key].click(event);
      this.show_flag=false;
  },
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'};
_this.data.keys=_this.deepcopy_data.keys;
_this.data.x=_this.deepcopy_data.x;
_this.data.y=_this.deepcopy_data.y;
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})
window.a_1_0_4_6_1_dom=null;//表示菜单的dom
window.a_1_0_4_6_1_vue=null;//表示菜单的dom
window.a_1_0_4_6_1_show_menu=function(obj){

let x=null;
let y=null;
if(obj.event){
    x=obj.event.clientX;
    y=obj.event.clientY;
}else{
    x=obj.x;
    y=obj.y;
}
let deepcopy_data={"menu_dct":obj.menu_dct,'keys':Object.keys(obj.menu_dct).sort(),x:x,y:y}
//如果菜单不存在则创建一个菜单
if(!a_1_0_4_6_1_dom){
let new_dom=document.createElement('a_1_0_4_6_1_menu');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
new_dom.setAttribute(':deepcopy_data','deepcopy_data');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:deepcopy_data}};
// 将这个 div 添加到 document.documentElement（即 <html> 元素）  
document.documentElement.appendChild(new_dom);
//渲染vue组件
window.a_1_0_4_6_1_vue=new Vue(vue_dct);
window.a_1_0_4_6_1_dom=new_dom;

document.addEventListener('click', function(event) {
  // Check if the clicked element is not doma and not a descendant of doma
  if (!window.a_1_0_4_6_1_vue.$refs.ref_obj.$el.contains(event.target)) {
    console.log("隐藏")
      window.a_1_0_4_6_1_vue.$refs.ref_obj.show_flag=false;
  }
});
}else{
    window.a_1_0_4_6_1_vue.$refs.ref_obj.data.keys=Object.keys(obj.menu_dct).sort();
    window.a_1_0_4_6_1_vue.$refs.ref_obj.data.menu_dct=obj.menu_dct;
    window.a_1_0_4_6_1_vue.$refs.ref_obj.data.x=x;
    window.a_1_0_4_6_1_vue.$refs.ref_obj.data.y=y;
    window.a_1_0_4_6_1_vue.$refs.ref_obj.data.refresh();
    window.a_1_0_4_6_1_vue.$refs.ref_obj.show_flag=true;

}

}
// a_1_0_4_6_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     x:444,y:444,
// }
// )
Vue.component2('a_1_0_4_6_1_base_select', {  
    template: `
<div ref="div"class="a_1_0_4_6_1_base_select_div" v-if="data.show_flag"  @click="clickk">
</div>
`,  

  data(){  

    return {  
      checked:true,
        data:{
          callback:null,
          params:null,
          now_color:'red',//'#3498db',//背景颜色
          show_flag:true,//是否显示
          absolute:null,//0表示左上 1表示右上 2表示左下 3表示右下
          absolute_style:"",
          ul_style:"",
          select_flag:false,//下拉选择标志
          menu_dct:{
          '0':{
              'text':"删除",
              'click':function(){console.log("???");
},
          },
          '1':{
              'text':"查看",
              'click':function(){console.log("2???");
},
          },}
        }
        ,
    }    

},
watch:{//监听输入框的变化
    "data.absolute":function(v){
      if (v==1){
          let node=this.$refs.div;
          node.style.borderLeft=`20px solid transparent`
          node.style.borderBottom=`0 solid transparent`
          node.style.borderRight=`0 solid transparent`
          node.style.borderTop=`20px solid #3498db`
          node.style.borderColor=`${this.data.now_color} transparent transparent`
      }
    },
    "data.now_color":function(v){
      let node=this.$refs.div;
          node.style.borderColor=`${v} transparent transparent`

    }
}, 
    methods: {  
      // select_li(kkk){
        
      //       console.log('base_select callback',kkk)
      //   this.data.callback(kkk)
      //     try{
      //       this.data.callback(kkk)
      //       // console.log('base_select callback end')
      //       }catch{}
      //     this.select_flag=false;
      // },
      clickk(event){
a_1_0_4_6_1_show_menu(
{
    menu_dct:this.data.menu_dct,
    event:event
}
);
event.stopPropagation();
      },
      
    },  
  }
);
Vue.component2('a_1_0_4_6_1', {  
  template: `
<div style="width:100%;height:100%;
    min-width: 300px;" v-show="data.show_flag" :key="refresh">

<div class="a_1_0_4_6_1_title">
  <div style="color:#bcbcbc">组件属性编辑框</div>
</div>
<a_1_0_4_6_1_menu2 ref="menu" :deepcopy_data="deep_menu" :key="refresh_menu"></a_1_0_4_6_1_menu2>

<!-- ------------这里是显示属性内容的--------start--------- -->
<div v-show="show_0">
  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">所属进程</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.process_name}}[{{show_1_data.process_id}}]</div>
  </div>
  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">组件名称</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.name}}</div>
  </div>
  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">组件id</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.id_}}</div>
  </div>

  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">组件模板名称</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.temp_name}}</div>
  </div>
  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">组件版本</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.version}}</div>
  </div>
  <div class="a_1_0_4_6_1_container">
    <div class="a_1_0_4_6_1_left">版本名称</div>
    <div class="a_1_0_4_6_1_right">{{show_1_data.version_name}}</div>
  </div>

</div>
<!-- ------------这里是显示属性内容的-------end--------- -->
<!-- ------------这里是显示入参内容的-------start--------- -->
<div v-show="show_1" :key="show_1_key">
  <div class="a_1_0_4_6_1_container" v-for="(item,indexr) in show_2_data.data">
    <div style="width: 40%; position: relative;
    height: 100%;
      align-items: center;
    display: flex;
    border-right: 1px solid #2b2b2b;overflow: hidden;">
    <span class="icon iconfont icon-bangzhu" style="margin-right:3px;cursor: pointer;"  @click="showTextDialog(item.note)"></span>
    <a_1_0_4_6_1_base_select :deepcopy_data="{'absolute':'1','now_color':item.color,'menu_dct':item.menu_dct}"></a_1_0_4_6_1_base_select>
    
    {{item.name}}</div>
    <div style="width: 40%; position: relative;height: 100%;
    border-right: 1px solid #2b2b2b;overflow: hidden;">
    
    {{item.val}}</div>
    <div class="width: 20%; position: relative;">{{item.type}}</div>
  </div>
  

</div>
<!-- ------------这里是显示入参内容的-------end--------- -->
<!-- ------------这里是显示出参内容的-------start--------- -->
<div v-show="show_2">
  <div class="a_1_0_4_6_1_container"style=" position: relative" v-for="(item,indexr) in show_3_data.data"
  
    @mouseleave="mouseleave_(item)"
@mouseenter="mouseenter_(item)"
  >
    <div style=" position: relative;">
    <span class="icon iconfont icon-bangzhu" style="margin-right: 3px;cursor: pointer;
    display: inline;" @click="showTextDialog(item.note)"></span>
    {{item.name}}</div>
    <div :key="item.key"  v-show="item.show_flag" >
      <div class="a_1_0_4_6_1_sub_menu2" v-for="(item2,indexr2) in item.lst":style="item2.style" >
          <div class="a_1_0_4_6_1_menu_item" >
              {{item2.val}}
          </div>
      </div>
    </div>
  </div>

</div>

<!-- ------------这里是显示出参内容的-------end--------- -->

    <el-dialog
      title="提示"
      :visible.sync="textDialogVisible"
      width="30%"
      @close="textDialogVisible = false">
      <!-- 对话框内容 -->
      <span>{{ dialogText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="textDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
`,  
data(){  
  return {  
    textDialogVisible:false,
    dialogText:'',
    color_dct:{
      "固定传参":"#80847e",
      "组件传参":"#55929e",
      "配置设参":"#ab9f64"
    },
    show_1_key:'101',
    refresh_menu:'33',
    deep_menu:'',
    now_show_id:0,
    show_0:true,
    show_1:false,
    show_2:false,
    refresh:'1',
    show_1_data:{
      process_name:'',//所属进程名称
      process_id:'',//所属进程id
      id_:'1',//组件id
      name:'',//组件名称
      temp_name:'',//组件模板名称
      version:'',//组件版本
      version_name:'',//版本名称
    },
    show_2_data:{
      data:[]
    },
    show_3_data:{
      data:[]
    },
    data:{
      old_md5:'',
      now_select:'1',//当前选择的
      key:'',
      id:'',
      show_flag:false,
    }
  }    

},
watch:{
'data.key':function(e){
  let _this=this;
  this.data.id=e.split("_")[1];
  console.log("???1")

  console.log("???2")
  this['refresh_show_'+this.now_show_id]();
  console.log("???3")
},
'data.show_flag':function(e){
  let _this=this;
  if(!_this.__init__x){
    // _this.deep_menu={
    //   0:{
    //     menu_name:'属性',
    //     menu_class:'icon iconfont icon-shuxing', 
    //     func:_this.data.show_menu_func   
    //   },
    //   1:{
    //     menu_name:'入参',
    //     menu_class:'icon iconfont icon-rucan', 
    //     func:_this.data.show_menu_func   
    //   },
    //  2:{
    //     menu_name:'出参',
    //     menu_class:'icon iconfont icon-chucan', 
    //     func:_this.data.show_menu_func   
    //   },
    // }
    // _this.refresh_menu
    try{
      _this.$refs.menu.data.set_menu({
        menu_id:0,
        menu_name:'属性',
        menu_class:'icon iconfont icon-shuxing', 
        func:_this.data.show_menu_func   
      })
      
      _this.$refs.menu.data.set_menu({
        menu_id:1,
        menu_name:'入参',
        menu_class:'icon iconfont icon-rucan', 
        func:_this.data.show_menu_func       
      })
      
      _this.$refs.menu.data.set_menu({
        menu_id:2,
        menu_name:'出参',
        menu_class:'icon iconfont icon-chucan', 
        func:_this.data.show_menu_func     
      })
    }catch{}
    
    _this.__init__x=true;
  }
},
'data.flow_data': {
  handler(newVal, oldVal) {
    if(!this.data.show_flag){return}
    try{
      let md5_val=md5(JSON.stringify(this.data.flow_data.dict[this.data.now_select]));
      this.data.flow_data.dict[this.data.now_select].flow_dict[this.data.id]
      if(md5_val!=this.data.old_md5){
        this.data.old_md5=md5_val;
        this['refresh_show_'+this.now_show_id]();
      }
    }catch{
      this.data.show_flag=false;
    }
  },
  deep: true,
},
},
methods:{
  showTextDialog(text) {
    this.dialogText = text;
    this.textDialogVisible = true;
  },
  mouseleave_:function(item){
  item.show_flag=false;
  let t=item.key.split("_");
  item.key=t[0]+'_'+t[1]==='2'?'1':'2';
  },
  mouseenter_:function(item){
    item.show_flag=true;
    let t=item.key.split("_");
    item.key=t[0]+'_'+t[1]==='2'?'1':'2';
  },
refresh_func:function(){
  this.refresh=this.refresh==='2'?'1':'2';
},
refresh_show_0:function(){
  let dct=this.data.flow_data.dict[this.data.now_select].flow_dict[this.data.id];
  this.show_1_data.process_id=dct.process_id;
  this.show_1_data.process_name=this.data.flow_data.dict[this.data.now_select].base_info['process_dct'][dct.process_id]||'无';
  this.show_1_data.name=dct.name;
  this.show_1_data.id_=this.data.id;
  this.show_1_data.temp_name=dct.temp_name;
  this.show_1_data.version=dct.version;
  this.show_1_data.version_name=dct.version_name;
},
设置为固定传参:function(k,value){
  //更新数据
  let update_val={
    "type":"change_data",
    "data_type":"set_list",//类型 修改数据
    "postput":[{
      'path':`flow_chat_config.dict.1.dict.${this.data.now_select}.flow_dict.${this.data.id}.in_kwargs.${k}`,
      'data':{'in_type1':'0','v0':value}
    }],
  }
  this.data.全局配置对象.更新(update_val);
},
设置为固定传参_呼起修改栏:function(k){
  this.$prompt('请输入固定传参内容', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    this.设置为固定传参(k,value);
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '取消输入'
    });       
  });
},
设置为组件传参:function(k){
  //更新数据
  let update_val={
    "type":"change_data",
    "data_type":"set_list",//类型 修改数据
    "postput":[{
      'path':`flow_chat_config.dict.1.dict.${this.data.now_select}.flow_dict.${this.data.id}.in_kwargs.${k}`,
      'data':{'in_type1':'1'}
    }],
  }
  this.data.全局配置对象.更新(update_val);
},
设置为配置设参:function(k,value){
  //更新数据
  let update_val={
    "type":"change_data",
    "data_type":"set_list",//类型 修改数据
    "postput":[{
      'path':`flow_chat_config.dict.1.dict.${this.data.now_select}.flow_dict.${this.data.id}.in_kwargs.${k}`,
      'data':{'in_type1':'2','v2':value}
    }],
  }
  this.data.全局配置对象.更新(update_val);
},
设置为配置设参_呼起修改栏:function(k){
  this.$prompt('请输入配置设参内容', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    this.设置为配置设参(k,value);
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '取消输入'
    });       
  });
},
refresh_show_1:function(){
  let _this=this;
  let in_type1_dct={
    0:"固定传参",
    1:"组件传参",
    2:"配置传参"
  }
  let dct=_this.data.flow_data.dict[_this.data.now_select].flow_dict[_this.data.id];
//计算入参
let temp_lst=[];
let sort1=Object.keys(dct.in_kwargs).sort();
  for (let k in sort1){
    let ddct=dct.in_kwargs[sort1[k]];
    let push_data={
      name:ddct.name,
      in_type1:ddct.in_type1,
      type:ddct.type,
      note:ddct.note,
      menu_dct:{
                '0':{
                    'text':"固定传参",
                    'click':function(){_this.设置为固定传参_呼起修改栏(sort1[k])},
                },
                '1':{
                    'text':"组件传参",
                    'click':function(){_this.设置为组件传参(sort1[k])},
                },
                '2':{
                    'text':"配置设参",
                    'click':function(){_this.设置为配置设参_呼起修改栏(sort1[k])},
                },
            }
     };
     push_data.in_type1_name=in_type1_dct[ddct.in_type1];

     if(ddct.in_type1=='0'){
      push_data.val=ddct.v0;
      push_data.color=_this.color_dct['固定传参'];
    }else if(ddct.in_type1=='1'){
      try{
        let out_dct=_this.data.flow_data.dict[_this.data.now_select].flow_dict[ddct.v1_[0]];
        push_data.val=out_dct.name+'.'+out_dct.out_kwargs[ddct.v1_[1]].name;
      }catch{
        push_data.val='error';
      }
      push_data.color=_this.color_dct['组件传参'];
      console.log("组件传参",push_data)
    }else if(ddct.in_type1=='2'){
   
      push_data.color=_this.color_dct['配置设参'];
   push_data.val=ddct.v2;
  }
  temp_lst.push(push_data);
  }
  _this.show_2_data.data=temp_lst;
  _this.show_1_key=_this.show_1_key==='102'?'101':'102';
},
refresh_show_2:function(){
  let _this=this;
  let flow_dct=_this.data.flow_data.dict[_this.data.now_select].flow_dict;
  let dct=flow_dct[_this.data.id];
  let temp_lst=[];

  
let sort1=Object.keys(dct.out_kwargs).sort();
for (let k=0;k<sort1.length;k++){
  let ddct=dct.out_kwargs[sort1[k]];
  
  let push_obj={
    name:ddct.name,
    note:ddct.note,
    show_flag:false,
    key:sort1[k]+'_'+'1',
    lst:[]
  };
  temp_lst.push(push_obj);
    if (ddct.out_params){
      let sort2=Object.keys(ddct.out_params).sort();
      if (!sort2.length){continue}
      for(let k2=0;k2<sort2.length;k2++){
        let ddct2=flow_dct[sort2[k2]];
        let temp___=ddct.out_params[sort2[k2]];
        let sort3=Object.keys(temp___).sort();
        for(let k3=0;k3<sort3.length;k3++){
          push_obj.lst.push(
            {
              style:`top:${25+push_obj.lst.length*44.8}px`,
              val:ddct2.name+'.'+ddct2.in_kwargs[sort3[k3]].name+`[${sort2[k2]}.${sort3[k3]}]`
            }
            
          );
        }
      }
      
    }
  }
  _this.show_3_data.data=temp_lst;
},
},

mounted:function(){
  
  _this.data.show_menu_func=function(menu_id){
    console.log("click",menu_id)
    if(_this.now_show_id==menu_id){return}
    else{
      _this['show_'+_this.now_show_id]=false;
      _this.now_show_id=menu_id;
      _this['show_'+_this.now_show_id]=true;
      
      _this['refresh_show_'+_this.now_show_id]();
    }
  }
  _this.data.menu=_this.$refs.menu;
  // window.tttttttttt=_this.$refs.menu
},
}
);

